<template>
  <div>
    <div style="width: 85%;margin: 10px auto;">
      <div class="card bj-txt">
        <el-link :underline="false" @click="router.push('/')">
          <h3> 首页</h3>
        </el-link>
        <el-divider direction="vertical" />
        <el-link :underline="false" @click="router.push('/front/goodslist')">
          <h4> 菜品信息列表</h4>
        </el-link>
        <el-divider direction="vertical" />
        <h4  >{{ router.currentRoute.value.meta.name }}</h4>
      </div>
      <div >
        <el-row :gutter="10">
          <el-col :span="19">
            <el-card class="box-card">
              <div class="grid-content bg-purple" style="min-height: 350px;">
                <el-row :gutter="20">
                  <el-col :span="11"><div class="grid-content ep-bg-purple" style="border: 1px solid #60626657;border-radius: 10px;padding: 3px;">
                    <img :src="data.goods.fileimg" style="width: 100%;height: 400px;border-radius: 10px;">
                  </div> </el-col>
                  <el-col :span="13">
                    <div class="grid-content ep-bg-purple" >
                      <el-descriptions style="margin-top: 20px"
                          :title="data.goods.name"
                          :column="1"
                          size="large">
                        <el-descriptions-item >
                          <h3 style="color: #ff0808;margin: 0">
                          <template v-if="data.goods.tjprice>0">
                            <span class="strike">￥{{data.goods.price}}</span>
                            <span style="margin-left: 10px">￥{{data.goods.tjprice}}</span>
                          </template>
                          <template v-else>
                            <span>￥{{data.goods.price}}</span>
                          </template>
                        </h3>
                        </el-descriptions-item>
                        <el-descriptions-item label="口 味:"> <el-tag size="small" type="danger"> {{data.goods.typename }}</el-tag> </el-descriptions-item>
                        <el-descriptions-item label="分 类:"> <el-tag size="small">{{data.goods.catename }}</el-tag></el-descriptions-item>
                        <el-descriptions-item label="库 存:"><el-tag type="danger" size="small">{{data.goods.kcnum}}</el-tag></el-descriptions-item>
                        <el-descriptions-item label="销 量:"><el-tag type="success" size="small">{{data.goods.xlnum}}</el-tag></el-descriptions-item>
                        <el-descriptions-item label="发布日期:">{{data.goods.savetime}}</el-descriptions-item>
                      </el-descriptions>

                      <div style="margin-top: 10px">
                        <el-input-number size="default" :min="1" v-model="data.slnum"></el-input-number>
                        <el-button v-if="data.goods.kcnum>0" type="primary"  @click="Addcart(data.goods.id,data.goods.kcnum)" style="margin-left: 10px;">
                          <el-icon><ShoppingCart /> </el-icon>&nbsp;加购</el-button>
                        <el-button v-else type="primary" disabled style="margin-left: 10px;">
                          <el-icon><ShoppingCart /> </el-icon>&nbsp;加购</el-button>
                        <el-button type="info" s @click="Addfav(data.goods.id)">
                          <el-icon><Star /></el-icon>&nbsp;收藏</el-button>
                      </div>
                  </div></el-col>
                </el-row>
              </div>
            </el-card>
            <div style="margin-top: 20px;" class="card">
              <el-tabs v-model="data.activeName" type="card">
                <el-tab-pane label="详情介绍" name="first">
                  <div v-html="data.goods.content" style="line-height: 1.8"></div>
                </el-tab-pane>
                <el-tab-pane label="评价反馈" name="second" >

                  <div style="min-height: 150px;margin-top: 20px;">
<!--                    <div slot="header" class="clearfix" style="text-align: center;">
                      <strong>评价信息</strong>
                    </div>-->
                    <div v-for="item in data.evaluatelist"  :key="item.id" style="width: 100%">
                      <div style="display: flex;margin-top: 15px;min-height: 100px;">
                        <div>
                          <img :src="item.member.img" style="width: 70px;height: 70px;border-radius: 100%;">
                        </div>
                        <div style="padding-left: 15px;line-height: 2;width: 100%">
                          <div >
                            <strong >{{item.member.username}}</strong>
                            <span style="padding-left: 20px;color: #888888FF"> <i class="el-icon-date"></i> {{item.savetime}}</span>
                            <el-link v-if="JSON.stringify(data.member)!=='{}' && data.member.id===item.memberid" style="margin-left: 20px;color: red" @click="del(item.id)" icon="el-icon-delete" :underline="false">
                              删除</el-link>
                            <el-rate style="float: right"  disabled v-model="item.pfnum"></el-rate>
                          </div>
                          <span style="padding-top: 20px;"> {{item.content}}</span>

                          <div style="padding-top: 20px;" v-if="item.hfcontent!==''"><b>回复内容：</b>【{{item.hftime}}】 {{item.hfcontent}}</div>

                          <div style="border-top: 1px dashed rgba(140,147,157,0.84);margin-top: 20px;"></div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="block" v-if="data.total>0" style="margin-top: 40px;text-align: center;margin-bottom: 20px;display: flex;justify-content: center">
                    <el-pagination
                        @current-change="getevaluatelist()"
                        :current-page="data.pageNum"
                        :page-size="data.pageSize"
                        background
                        layout="prev, pager, next"
                        :total="data.total">
                    </el-pagination>
                  </div>


                </el-tab-pane>
              </el-tabs>
            </div>


          </el-col>

          <el-col :span="5">
            <div class="grid-content bg-purple" style="min-height: 350px;">
              <el-card class="box-card">
                <div slot="header" class="clearfix" style="text-align: center;margin: 20px auto;">
                  <h3>猜你喜欢</h3>
                </div>
                <el-divider border-style="dashed" style="margin: 10px 0" />
                <div v-for="(item,i) in data.goodslist">
                  <el-card shadow="never">
                    <div>
                      <img :src="item.fileimg" @click="xqdateil(item.id)" style="width: 240px;height: 200px;border-radius: 10px;">
                    </div>
                    <div style="margin: 10px 0">
                    <span >
                      <b style="color: #ff0808">
                      <template v-if="item.tjprice>0">
                        <span class="strike">￥{{item.price}}</span>
                        <span style="margin-left: 10px">￥{{item.tjprice}}</span>
                      </template>
                      <template v-else>
                        <span>￥{{item.price}}</span>
                      </template>
                    </b>
                      </span >
                    | <el-tag type="warning" :effect="'dark'">{{ item.catename }}</el-tag>
                    | <a>销量:{{item.xlnum}}</a>
                    </div>
                    <div style="padding-left: 15px;line-height: 2">
                      <div class="overflowShow" >
                        <a href="javascript:void (0)" @click="xqdateil(item.id)" style="text-decoration: none;color: #545c64">
                          <strong >{{item.name}}</strong>
                        </a>
                      </div>
                    </div>
                  </el-card>
                  <el-divider border-style="dashed" style="margin: 10px 0" />

                </div>


              </el-card>



            </div>
          </el-col>

        </el-row>
      </div>

    </div>
  </div>
  
</template>

<script setup>
import {createApp, onMounted, onUnmounted, reactive, ref} from "vue";
import request from '@/utils/request.js'
import {ElMessage, ElMessageBox} from "element-plus";
import qs from "qs";
import {useRouter} from "vue-router";
import {listenMsg} from "@/utils/crossTagMsg.js";
import {ShoppingCart, Star} from "@element-plus/icons-vue";
//创建路由对象
const router = useRouter()
const data = reactive({
  member:JSON.parse(localStorage.getItem('member') || '{}'),
  id:router.currentRoute.value.query.id,
  key:'',
  pageNum:1,
  pageSize:10,
  total:0,
  goods:{},
  goodslist:[],
  evaluatelist:[],
  content:'',
  hfcontent:'',
  currentId:0,
  activeName:'first',
  slnum:1
})

const cancelListen = listenMsg(msginfo=>{
  if (msginfo.type==='evaluate'){
    getevaluatelist()
  }
})
onUnmounted(cancelListen)

//信息详情
const dateil =()=>{
  request.post('/goods/detail', qs.stringify({
    id:data.id,
  })).then(res => {
    data.goods = res.data.goods
    data.goodslist = res.data.list
  })
}
//收藏新增
const Addfav = (goodsid) =>{
  if (JSON.stringify(data.member)==='{}'){ElMessage({ message: '登录后收藏', grouping: true, type: 'error',});return false;}
  request.post('/fav/add', qs.stringify({
    memberid:data.member.id,
    goodsid:goodsid,
  })).then(res => {
    if(res.code==='200'){
      ElMessage.success("操作成功")
    }else{
      ElMessage.error(res.msg)
    }
  })
}

//购物车新增
const Addcart = (goodsid,kcnum) =>{
  if (JSON.stringify(data.member)==='{}'){ElMessage({ message: '登录后加购', grouping: true, type: 'error',});return false;}
  if (data.slnum>kcnum){ElMessage({ message: '操作失败，已达库存上限', grouping: true, type: 'error',});return false;}
  request.post('/cart/add', qs.stringify({
    memberid:data.member.id,
    goodsid:goodsid,
    slnum:data.slnum,
  })).then(res => {
    if(res.code==='200'){
      ElMessage.success("操作成功")
    }else{
      ElMessage.error(res.msg)
    }
  })
}

//评价信息列表
const getevaluatelist =()=>{
  request.post('evaluateList', qs.stringify({
    goodsid:data.id,
    pageNum:data.pageNum,
    pageSize:data.pageSize,
  })).then(res => {
    data.evaluatelist = res.data.list
    data.total = res.data.total
  })
}
//删除留言信息
const del = (id)=>{
  request.post('evaluateDel', qs.stringify({
    id:id,
  })).then(res => {
    if(res.code==='200'){
      ElMessage.success("操作成功")
      getevaluatelist()
    }else{
      ElMessage.error(res.msg)
    }
  })
}

const xqdateil=(id)=>{
  location.href = '/front/goodsDateil?id='+id
}

  dateil()
  getevaluatelist()

</script>
<style scoped>

</style>
